<template>
  <div class="app-container">
    <!-- 侧边栏 -->
    <aside class="sidebar">
      <div class="sidebar-logo">
        <h2>交易详情</h2>
      </div>
      <nav class="sidebar-nav">
        <ul>
          <li
              :class="{ active: currentPage === 'order' }"
              @click="navigateTo('order')"
          >
            <el-icon class="icon">
              <ShoppingCart/>
            </el-icon>
            <span>订单管理</span>
          </li>
          <li
              :class="{ active: currentPage === 'address' }"
              @click="navigateTo('address')"
          >
            <el-icon class="icon">
              <HomeFilled/>
            </el-icon>
            <span>地址管理</span>
          </li>
          <li
              :class="{ active: currentPage === 'cart' }"
              @click="navigateTo('cart')"
          >
            <el-icon class="icon">
              <ShoppingBag/>
            </el-icon>
            <span>购物车</span>
          </li>
        </ul>
      </nav>
    </aside>

    <!-- 主内容区 -->
    <main class="main-content">
      <component :is="currentComponent"></component>
    </main>
  </div>
</template>

<script setup>
import {computed, ref, watch} from 'vue';
import {useRoute, useRouter} from 'vue-router';
import {HomeFilled, ShoppingBag, ShoppingCart} from '@element-plus/icons-vue';
import OrderManagement from "@/components/shopping/OrderManagement.vue";
import AddressManagement from "@/components/shopping/AddressManagement.vue";
import Cart from "@/components/shopping/Cart.vue";

const route = useRoute();
const router = useRouter();

// 当前页面 - 从路由参数获取或默认订单管理
const currentPage = ref(route.query.page || 'order');

// 根据当前页面返回对应组件
const currentComponent = computed(() => {
  switch (currentPage.value) {
    case 'order':
      return OrderManagement;
    case 'address':
      return AddressManagement;
    case 'cart':
      return Cart;
    default:
      return OrderManagement;
  }
});

// 导航到指定页面
const navigateTo = (page) => {
  // 更新URL参数但不刷新页面
  router.replace({
    path: route.path,
    query: {...route.query, page}
  });
};

// 监听路由变化 ,url栏直接切换
watch(
    () => route.query.page,
    (newPage) => {
      if (newPage && ['order', 'address', 'cart'].includes(newPage)) {
        currentPage.value = newPage;
      }
    }
);

</script>

<style scoped>
.app-container {
  display: flex;
  min-height: 100vh;
  background-color: #f5f7fa;
}

.sidebar {
  width: 220px;
  background-color: #2c3e50;
  color: #fff;
  height: 100vh;
  position: fixed;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

.sidebar-logo {
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-logo h2 {
  margin: 0;
  font-size: 18px;
}

.sidebar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-nav li {
  padding: 15px 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s;
}

.sidebar-nav li:hover {
  background-color: #34495e;
}

.sidebar-nav li.active {
  background-color: #1abc9c;
}

.icon {
  margin-right: 10px;
  width: 20px;
  height: 20px;
}

.main-content {
  flex: 1;
  margin-left: 220px;
  padding: 20px;
}
</style>